<template>
  <div class="micro-app-wrapper">
    <a-button @click="testPath">测试/path/:id</a-button>
    <a-button @click="testQuery">测试Query</a-button>
    <a-button>
      <router-link :to="`/qes-vue3/#/dashboard/123`"
                   style="{font-size:14px;}">link-path</router-link>
    </a-button>
    <a-button>
      <router-link :to="'/qes-vue3/#/page2?a=1&b=2'"
                   style="{font-size:14px;}">link-page2-query</router-link>
    </a-button>
    <!--
          name(必传)：应用名称
          url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
          baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`
          > http://localhost:8001/admin/sys/components/micro-front-end/child/#/big-screen/wh
        -->
    <a-spin tip="Loading..."
            :spinning="loading">
      <micro-app :name="micro"
                 :url="url"
                 inline
                 disable-sandbox
                 @created="handleCreated"
                 @beforemount="handleBeforeMount"
                 @mounted="handleMounted"
                 @unmount="handleUnMount"
                 @error="handleError"></micro-app>
    </a-spin>
  </div>
</template>
<script>
import microApp, { startApp, bindEvents } from './loadMicro'
import config from './config'
export default {
  props: {
    micro: {
      type: String,
      default: 'qes-vue3'
    }
  },
  data () {
    return {
      url: config['qes-vue3'] + '/qes-vue3/',
      loading: false
    }
  },
  watch: {
    '$route': {
      handler (router) {
        const reg = /.*(?:#(.*))/
        if (reg.test(router.fullPath)) {
          console.log('路由变更了-hash: ', router.fullPath)
          // console.log('路由变更了-hash: ', reg.exec(router.fullPath), router.fullPath.replace(/.*(?:#(.*))/, '$1'))
          microApp.setData(this.micro, { path: router.fullPath.replace(/.*(#.*)/, '$1') })
        }
      }/* ,
      immediate: true */
    }
  },
  mounted () {
    /* console.log(this.micro)
    startApp() */
  },
  methods: {
    testPath () {
      // this.$router.push({path:'/xxx'query:{id:1}})
      microApp.setData(this.micro, { path: '#/dashboard/123' })
    },
    testQuery () {
      microApp.setData(this.micro, { path: '#/page2?plan=abc' })
    },
    /* handleDataChange (data) {
      console.log('子应用dispatch上来的数据', data)
    }, */
    handleCreated () {

    },
    handleBeforeMount () {
      // console.log('子应用' + this.$route.name + ':before Mount')
      window.__MICRO_APP_NAME__ = this.micro
      bindEvents()
      this.loading = true
    },
    handleMounted () {
      console.log('子应用' + this.micro + ':Mount')
      microApp.setData(this.micro, { path: this.$route.fullPath.replace(/.*(#.*)/, '$1') })
      this.loading = false
    },
    handleUnMount () {
      // console.log('子应用' + this.micro + ':' + this.$route.name + ':unMount 卸载完成了')
      this.loading = false
      // window.dispatchEvent(new Event(`unmount-${this.micro}`))
      // window.eventCenterForQesVue3 = null
    },
    handleError () {
      // console.log('子应用' + this.$route.name + ':error 加载失败了')
      this.loading = false
    }
  }
}
</script>
<style>
.micro-app-wrapper {
  width: 100%;
  height: 100%;
}
.micro-app-wrapper .ant-spin-nested-loading {
  width: 100%;
  height: 100%;
}
</style>
